<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html"
      xmlns:javascipt="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
    #bao {
        margin: 0 auto;
        width: 800px;
    }
</style>
<body>
<div id="bao">
    <h2>健身房会员卡管理系统</h2>
    <div>
        <select id="select">
            <option value='0'>全部</option>
        </select>
        <input type="button" value="查询" onclick="selectByTypeId()"/>
    </div>
    <table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th>持卡人姓名</th>
            <th>手机号</th>
            <th>卡类型</th>
            <th>卡状态</th>
            <th>卡内余额</th>
            <th>开卡日期</th>
            <th>操作</th>
        </tr>
        </thead>
        <button onclick="add()">办卡</button>
        <tbody id="tbody">
        <div class="segment" id="cha" align="center" th:each="user : ${page.getRecords()}">
            <tr>
                <td th:text="${user.userName}"></td>
                <td th:text="${user.phone}"></td>
                <td th:text="${user.cardType.name}"></td>
                <td th:text="${user.status}==0?'冻结':'激活'"></td>
                <td th:text="${user.balance}"></td>
                <td th:text="${user.openDate}"></td>
                <td th:data-id="${user.id}" th:data-status="${user.status}"
                    onclick="activate(this.getAttribute('data-id'),this.getAttribute('data-status'))"><a id="status"
                                                                                                      th:text="${user.status}==0?'冻结':'激活'"> </a>
                </td>
            </tr>
        </div>

        </tbody>

    </table>
    <ul class="pagination">
        <li class="page-item"><a class="page-link" th:href="@{/card/page/0(pageNum=${1})}">首页</a></li>
        <li class="page-item"><a class="page-link" th:href="@{/card/page/0(pageNum=${page.getCurrent()-1})}">上一页</a></li>
        <li class="page-item"><a  class="page-link" th:href="@{/card/page/0(pageNum=${1})}" data-toggle="tooltip" title="首页">1</a></li>
        <li class="page-item"><a class="page-link" th:href="@{/card/page/0(pageNum=${2})}">2</a></li>
        <li class="page-item"><a class="page-link" th:href="@{/card/page/0(pageNum=${3})}">3</a></li>
        <li class="page-item"><a class="page-link" th:href="@{/card/page/0(pageNum=${page.getCurrent()+1})}">下一页</a></li>
        <li class="page-item"><a class="page-link"  th:href="@{/card/page/0(pageNum=${page.getTotal()%page.getCurrent()>0?page.getTotal()/page.getCurrent():(page.getTotal()/page.getCurrent())-1 })}">尾页</a></li>
    </ul>
</div>
</body>
<script>
    $(function () {
        $.ajax({
            "url": '/type/list/type',
            "type": "post",
            "dataType": "json",
            "success": function (a) {
                let html = "";
                for (var i = 0; i < a.length; i++) {
                    html += "  <option value='" + (i + 1) + "'>" + a[i].name + "</option>";

                }
                $('#select').append(html);
            },
            error: function () {
                alert("加载失败");
                // window.location.href = "./index.html";
            }
        });
    });

    function selectByTypeId() {
        let typeId = $('#select option:selected').val();
        window.location.href="/card/page/"+typeId;
    }

    function activate(id, s) {
        // var s= $("#status").text();
        if (s == 1) {
            if (confirm("是否冻结此健身卡"))
                $.ajax({
                    "url": "/card/update/status",
                    "type": "get",
                    "data": {"status": 0, "id": id},
                    "dataType": "json",
                    "success": function (a) {
                        if (a == true) {
                            alert("修改成功")
                        }

                    },
                    "error": function () {
                        alert("服务器错误");
                    }
                })


        } else {
            if (confirm("是否激活此健身卡"))
                $.ajax({
                    "url": "/gymCard/update/status",
                    "type": "get",
                    "data": {"status": 1, "id": id},
                    "dataType": "json",
                    "success": function (a) {
                        if (a == true) {
                            alert("修改成功")
                        }

                    },
                    "error": function () {
                        alert("服务器错误");
                    }
                })
            window.location.reload();

        }
    }
    function add() {
        window.location.href="/card/add";
    }

</script>
</html>